<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="../favicon.ico"> 
    <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
     <!-- jqgrid-->
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
     <link rel="stylesheet" href="__STATIC__/layout/css/channel.css" type="text/css">
    <style>
        .radio-inline input[type=radio] {
            margin-top: 4px
        }
    </style>
</head>

<body style="color:#333;padding:3px;overflow-x: auto;">
    <!-- 标题 -->
    <div class="page-heade">
      <h1 class="title_color">TI费用预算使用报表</h1>
    </div>
    <!-- 标题 -->
     <div>
    <form action="" class="form-inline" id="f1" method="post">
    <input type="hidden" value='{$page}' name="page" id="page-go"/>
                      <input type="hidden" value='{$list}' name="list" id="list-go"/>
      <table class="row-margin-top tab-content table-bordered table" border="1">

        <tr>
            <td style="min-width: 120px;width: 120px"><label for="" class="form-label">客户维度</label></td>
            <td>
              <div class="form-group">
                  <label class="radio-inline">
                    <input type="radio" name="customW" {if $data.customW==1} checked {/if}  value="1">不显示客户维度
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="customW" {if $data.customW==2} checked {/if} value="2">分区
                  </label>
                    <label class="radio-inline">
                    <input type="radio" name="customW" {if $data.customW==3} checked {/if} value="3">省份
                  </label>
                    <label class="radio-inline">
                    <input type="radio" name="customW" {if $data.customW==4} checked {/if} value="4">城市
                  </label>
              </div>
              <!--分区-->
              <div class="fenqu" {if $data.customW!=2} style="display: none"{/if}>
                <input type="hidden" name="fenqu" value="{$data.fenqu}"/>
                <div class="row">
                   <div class="col-xs-4">
                          <div class="input-group" id="" >
                              <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="fenqu"  value="{:isset($supply)?$supply.jxs:''}">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                  </ul>
                              </div>
                          </div>
                      </div>
                      <div class="col-xs-2">
                          <button class="btn btn-primary btn-sm" type="button" id="select_fenqu">选择</button>
                      </div>
                </div>
                <div class="duoxuan" id="selected_fenqu" style="margin: 20px,0">
                  {volist name="fenqu" id="f"}
                    <span class="ren" data-id="{$f.id}">{$f.title}<span class="close">×</span></span>
                  {/volist}
                </div>
              </div>
              <!--分区-->
               <!--省份-->
              <div class="sheng" {if $data.customW!=3} style="display: none"{/if}>
                <input type="hidden" name="sheng" value="{$data.sheng}"/>
                <div class="row">
                   <div class="col-xs-4">
                          <div class="input-group" id="" >
                              <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="sheng"  value="{:isset($supply)?$supply.jxs:''}">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                  </ul>
                              </div>
                          </div>
                      </div>
                      <div class="col-xs-2">
                          <button class="btn btn-primary btn-sm" type="button" id="select_sheng">选择</button>
                      </div>
                </div>
                <div class="duoxuan" id="selected_sheng" style="margin: 20px,0">
                    {volist name="sheng" id="f"}
                      <span class="ren" data-id="{$f.id}">{$f.title}<span class="close">×</span></span>
                    {/volist}
                </div>
              </div>
              <!--省份-->
              <!--城市-->
              <div class="shi" {if $data.customW!=4} style="display: none"{/if}>
                <div class="row">
                   <div class="col-xs-4">
                   <input type="hidden" name="shi" value="{$data.shi}"/>
                          <div class="input-group" id="" >
                              <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="shi"  value="{:isset($supply)?$supply.jxs:''}">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                  </ul>
                              </div>
                          </div>
                      </div>
                      <div class="col-xs-2">
                          <button class="btn btn-primary btn-sm" type="button" id="select_shi">选择</button>
                      </div>
                </div>
                <div class="duoxuan" id="selected_shi" style="margin: 20px,0">
                  {volist name="shi" id="f"}
                    <span class="ren" data-id="{$f.id}">{$f.title}<span class="close">×</span></span>
                  {/volist}
                </div>
              </div>
              <!--城市-->
            </td>
        </tr>
          <tr>
            <td style="min-width: 120px;width: 120px"><label for="" class="form-label">产品维度</label></td>
            <td>
              <div class="form-group">
                  <label class="radio-inline">
                    <input type="radio" name="product" {if $data.product==0} checked {/if} value="0">不显示产品维度
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="product" {if $data.product==1} checked {/if}  value="1">品牌
                  </label>
              </div>
              <!--品牌-->
              <div class="brand" {if $data.product==0} style="display: none" {/if}>
                <div class="row">
                <input type="hidden" name="brand" value="{$data.brand}"/>
                   <div class="col-xs-4">
                          <div class="input-group" id="" >
                              <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="brand"  value="{:isset($supply)?$supply.jxs:''}">
                              <div class="input-group-btn">
                                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                      <span class="caret"></span>
                                  </button>
                                  <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                  </ul>
                              </div>
                          </div>
                      </div>
                      <div class="col-xs-2">
                          <button class="btn btn-primary btn-sm" type="button" id="select_brand">选择</button>
                      </div>
                </div>
                <div class="duoxuan" id="selected_brand" style="margin: 20px,0">
                  {volist name="pro" id="f"}
                    <span class="ren" data-id="{$f.id}">{$f.brand_name}<span class="close">×</span></span>
                  {/volist}
                </div>
              </div>
              <!--品牌-->
            </td>
        </tr>
         <tr>
            <td style="min-width: 120px;width: 120px"><label for="" class="form-label">科目维度</label></td>
            <td>
              <div class="form-group">
                  <label class="radio-inline">
                    <input type="radio" name="kemu" {if $data.kemu==0} checked{/if} id="kemu1" value="0">不显示费用科目维度
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="kemu" id="kemu2" {if $data.kemu==1} checked{/if} value="1">一级费用科目
                  </label>
                   
              </div>
            </td>
        </tr>
          <tr>
            <td style="min-width: 120px;width: 120px"><label for="" class="form-label">财年维度</label></td>
            <td>
              <div class="form-group">
                  <label class="radio-inline">
                    <input type="radio" name="cainian" {if $data.cainian==0} checked{/if} id="cainian1" value="0">按财年统计
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="cainian" {if $data.cainian==1} checked{/if} id="cainian2" value="1">按一级考核期统计
                  </label>
                    <label class="radio-inline">
                    <input type="radio" name="cainian" {if $data.cainian==2} checked{/if} id="cainian3" value="2">按二级考核期统计
                  </label>
              </div>
              <div style="padding: 2px;">
                财年：<select name="cid" id="cid" class="form-control">
                          {volist name="cainian" id="c"}
                            <option value="{$c.id}" {if $c.id==$cid} selected {/if} >{$c.title}</option>
                          {/volist}
                      </select>
              </div>
            </td>
        </tr>
         <tr>
            <td style="min-width: 120px;width: 120px"><label for="" class="form-label">查询类型</label></td>
            <td>
              <div class="form-group">
                  <label class="radio-inline">
                    <input type="radio" name="searchKind" {if $data.searchKind==0} checked{/if} id="searchKind1" value="0">按最新架构查询
                  </label>
                  <label class="radio-inline">
                    <input type="radio" name="searchKind" {if $data.searchKind==1} checked{/if} value="1">按申请时的历史记录查询
                  </label>
              </div>
            </td>
        </tr>
      <tr>
       <td colspan="2" class="text-center">
           <button class="btn btn-info query" type="button">查询</button>
           <button class="btn btn-info emptyIf" type="button">清空查询条件</button>
           
            </td>
          </tr>
      </table>
    <p class="text-right">单位：人民币元</p>
      <table class="table row-margin-top table-bordered text-center bud_hei">
                 <tr class="info">
                        <th class="text-center">序号</th>
                        {volist name="td" id="t"}
                        <th class="text-center">{$t}</th>
                        {/volist}
                        <th class="text-center">预算金额</th>
                        <th class="text-center">已批复金额</th>
                        <th class="text-center">未使用金额</th>
                        <th class="text-center">申请中金额</th>
                        <th class="text-center">统计日期</th>
                        <th class="text-center">红绿灯</th>
                    </tr>
                    <tbody>
                    {volist name="arr" id="vo"}
                    {$vo.tr}
                    {/volist}
                      
                    </tbody>
                    <tfoot>
                      <tr class="trTotal">
                        <td>合计:</td>{volist name="td" id="t"}
                        <th class="text-center"></th>
                        {/volist}
                        <td class="ObjectNum text-right zonghe1">17856000</td>
                        <td class="ObjectNum text-right zonghe2">0</td>
                        <td class="ObjectNum text-right zonghe3">17856000</td>
                        <td class="ObjectNum text-right zonghe4">0</td>
                        <td></td>
                        <td></td>
                      </tr>
                    </tfoot>
              </table>
          <h5 class="text-center">
            总共有{$sum}条记录，第{$page}/{$maxpage}页，当前页：<input id="page" type="text" style="width: 70px;" value="{$page}"  /><span id="gopage">GO</span>&nbsp;&nbsp;<span id="fistpage">首页</span>&nbsp;&nbsp; 每页显示
           <select id="pagesize">
                        <option value='10' {if condition="$list eq 10"}selected{/if}>10条</option>
                        <option value='20'{if condition="$list eq 20"}selected{/if}>20条</option>
                        <option value='40'{if condition="$list eq 40"}selected{/if}>40条</option>

            </select>
        </h5>
     <div class="padding-10 colorRed">
      <p>说明：</p>
      <p class="padding-10">1.红灯表示已批复金额大于预算金额;绿灯表示未使用金额大于等于申请中金额;黄灯表示未使用金额小于申请中金额。</p>
      <p>2.已批复金额和申请中金额的金额按活动时间分摊到每一天。</p>
      <p class="padding-10">3.已核销金额计入活动开始时间。</p>
      <p>4.“查询类型”只针对客户维度与产品维度。</p>
     </div>
</form>
    </div>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!--统计代码，可删除-->
    <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
    <script src="__STATIC__/layout/js/common.js"></script>
    <script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="__STATIC__/layout/js/plugins/layer/laydate/laydate.js"></script>
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>

    <script>
    for(var i=1;i<=4;i++){
      var he=0;
      $(".jisuan"+i).each(function(){
        he+=parseFloat($(this).html());
      })
      $(".zonghe"+i).html(he);
    }
    $(".emptyIf").click(function(){
      location.href="{:url('yusuan')}"
    })
     $("#pagesize").change(function(){
            $("#page-go").val(1);
            $("#list-go").val($(this).val());
             document.getElementById("f1").submit();
        })
        $("#gopage").click(function(){
             $("#page-go").val($("#page").val());
           document.getElementById("f1").submit();
        })
        $("#page").keyup(function(){

            if(isNaN(parseInt($(this).val()))){
                $(this).val(1);
            }else{
                $(this).val(parseInt($(this).val()));
            }
            
        })
        $("#fistpage").click(function(){
              $("#page-go").val(1);
              document.getElementById("f1").submit();
        })
    // //关闭多选某一项
    $('body').on('click','.duoxuan .close',function () {
      var id=$(this).closest('.ren').attr("data-id");
      $("#tb>tr").each(function(){
        if($(this).attr("fid")==id){
          $(this).remove();
        }
      })
        $(this).closest('.ren').remove()
    })
    $(".query").click(function(){
      var fenqu=[];var i=0;
      $("#selected_fenqu>.ren").each(function(){
        fenqu[i]=$(this).attr("data-id")
        i++
      })
      fenqu=fenqu.join('-');
      $("[name='fenqu']").val(fenqu)

      var sheng=[];i=0;
      $("#selected_sheng>.ren").each(function(){
        sheng[i]=$(this).attr("data-id")
        i++
      })
      sheng=sheng.join('-');
      $("[name='sheng']").val(sheng)

      var shi=[];i=0;
      $("#selected_shi>.ren").each(function(){
        shi[i]=$(this).attr("data-id")
        i++
      })
      shi=shi.join('-');
      $("[name='shi']").val(shi)

      var brand=[];i=0;
      $("#selected_brand>.ren").each(function(){
        brand[i]=$(this).attr("data-id")
        i++
      })
      brand=brand.join('-');
      $("[name='brand']").val(brand)

       document.getElementById("f1").submit()
    })
    $("[name='product']").change(function(){
      var cus=$("[name='product']:checked").val();
      
      if(cus==1)
        $(".brand").show();
      else 
        $(".brand").hide()
    
    })
    $("[name='customW']").change(function(){
      var cus=$("[name='customW']:checked").val();
      $(".fenqu,.sheng,.shi").hide();
      if(cus==2)
        $(".fenqu").show();
      else if(cus==3)
        $(".sheng").show();
      else if(cus==4)
        $(".shi").show();
    })
     //弹出选择品牌框
        $('#select_brand').on('click',function () {
                var index = layer.getFrameIndex(window.name)
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    maxmin:true,
                    content:'{:url("Apapply/selectBrands")}?index='+index
                })
                return  false
        })

       //产品品牌搜索自动补全
    $("#brand").bsSuggest({
        url: "{:url('select/brandjson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_brand .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_brand').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
     $("#shi").bsSuggest({
        url: "{:url('Apapply/shijson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_shi .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_shi').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
        //弹出选择市框
        $('#select_shi').on('click',function () {
                var index = layer.getFrameIndex(window.name)
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    maxmin:true,
                    content:'{:url("Apapply/selectShi")}'
                })
                return  false
        })
           //分区搜索自动补全
    $("#fenqu").bsSuggest({
        url: "{:url('Apapply/fenqujson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_fenqu .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_fenqu').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });

  //弹出选择分区框
        $('#select_fenqu').on('click',function () {
                var index = layer.getFrameIndex(window.name)
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    maxmin:true,
                    content:'{:url("Apapply/selectFenqu")}'
                })
                return  false
        })

        $("#sheng").bsSuggest({
        url: "{:url('Apapply/shengjson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_sheng .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_sheng').append('<span class="ren" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
     //弹出选择省框
        $('#select_sheng').on('click',function () {
                var index = layer.getFrameIndex(window.name)
                layer.open({
                    type:2,
                    area:['60%','60%'],
                    maxmin:true,
                    content:'{:url("Apapply/selectSheng")}'
                })
                return  false
        })

        $(document).ready(function(){
          var $ObjectNum =$(".ObjectNum");
             toNum($ObjectNum);
        })
    </script>
</body>

</html>
